<template>
  <div class="basetable">
    <!-- v-loading 设置加载 -->
    <div class="selectMenu">
      <el-button size="small" type="primary" @click="deriveClick">导出</el-button>
      <!-- 点击触发add方法 -->
      <el-button size="small" type="primary" @click="add">新增老师</el-button>
        <span class="spansearch">教师姓名</span>
        <el-input
         size="small"
          placeholder="输入教师姓名"
          style="width:100px;margin-left: 16px;"
          @input="searchClick"
          clearable
          v-model="input1"
        >
        </el-input>

        <span class="spansearch">教师手机号</span>
        <el-input
         size="small"
          placeholder="输入手机号搜索"
          style="width:200px;margin-left: 16px;"
          @input="searchClicktel"
          clearable
          v-model="inputtel"
        >
        </el-input>
    </div>
    <div class="tableMain">
      <el-table :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
      style="width: 100%">
      <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
        <el-table-column prop="name" label="姓名" width="200"></el-table-column>
        <el-table-column prop="career" label="专业" width="200"></el-table-column>
        <el-table-column prop="zx" label="教师资质" width="250"></el-table-column>
        <el-table-column prop="user_code" label="身份证" width="250"></el-table-column>
        <el-table-column prop="tel" label="电话"></el-table-column>
        <el-table-column width="200" label="操作" fixed="right">
          <template slot-scope="scope">
            <!-- 点击编辑进入编辑页面进行编辑表格数据 -->
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>      
    </div>
    
    <!-- 下面这个用来设置点击添加按钮的弹出框，里面可以进行嵌套表格来展示弹出的表格信息,使用下面的:visible.sync来控制显示与否 -->
    <!-- 里面绑定的是我们新设置的值，填写完成后，将我们这个新值塞到页面中所有的数据当中去 -->
    <el-dialog title="添加老师信息" width="850px" :visible.sync="dialogFormVisible" @close='closeDialog(value)'>
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form :model="form">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="姓名" prop="name"
            :label-width="formLabelWidth">
              <el-input v-model="form.name" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="专业" prop="career"
            :label-width="formLabelWidth">
              <el-input v-model="form.career" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="手机号码" prop="tel"
            :label-width="formLabelWidth">
              <el-input v-model="form.tel" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="教师资质" prop="zx"
            :label-width="formLabelWidth">
              <el-input v-model="form.zx" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="身份证号" prop="tel"
            :label-width="formLabelWidth">
              <el-input v-model="form.user_code" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog title="编辑老师信息" width="850px" :visible.sync="dialogFormVisiblea">
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form :model="form">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="姓名" :label-width="formLabelWidth">
              <el-input v-model="form.name" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="专业" :label-width="formLabelWidth">
              <el-input v-model="form.career" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="手机号码" :label-width="formLabelWidth">
              <el-input v-model="form.tel" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="教师资质" :label-width="formLabelWidth">
              <el-input v-model="form.zx" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item style="margin-bottom:20px;" label="身份证号" prop="tel" :label-width="formLabelWidth">
              <el-input v-model="form.user_code" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="updatea">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 导出 -->
    <el-dialog
      title="导出片段"
      :visible.sync="dialogVisibletwo"
      width="45%"
      :before-close="handleClose"
    >
      <div>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="(item,v) in cities" :label="item" :key="v">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibletwo = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleClick">确 定</el-button>
      </span>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 25, 50,100]" 
      :page-size="pagesize"         
      layout="total, sizes, prev, pager, next, jumper"
      :total="userList.length">    
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage:1, //初始页
      pagesize:10,    //    每页的数据
      userList: [],
      search:"",
      dialogFormVisible: false,
      dialogFormVisiblea: false,
      formLabelWidth: "100px",
      // 设置form用于进行添加的时候绑定值
      form: {},
      value6: "",
      currentPage3: 1,
      currentIndex: "",
      input1: "", //搜索
      inputtel: "", //搜索
      value:'',
      dialogVisibletwo:false,
      cities: [
        { name:"姓名" , id:'name' },
        { name: "专业 ", id: "career" },
        { name: "教师资质", id: "在线" },
        { name: "身份证号", id: "user_code" },
        { name: "电话", id: "tel" },
      ],
      checkedCities: [
        {name:"姓名" , id:'name'},
        "专业",
        "教师资质",
        "身份证号",
        "电话",
      ],
      tclists:'',
    };
  },
  created(){
    this.thlists();
  },
  methods: {
    //导出
    deriveClick() {
      this.dialogVisibletwo = true;
    },
    closeDialog(val){
      val = ''
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
                this.pagesize = size;
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
        },
    //教师列表
    async thlists(){
      let a = (await this.$api.home.teacherLists({})).data.data
      this.tclists = a
      console.log("a",a);
      this.userList = a
    },
    // 增加数据的方式，单独的设置一些值，用于增加功能，这些值放在对象里面进行设置，然后将这个新增的对象塞到总数据里面
    add() {
      this.form = {
      };
      //   设置点击按钮之后进行显示对话框
      this.dialogFormVisible = true;
    },
    async update() {
      let add = (await this.$api.home.teacherAdd({
        name:this.form.name,
        tel:this.form.tel,
        career:this.form.career,
        zx: this.form.zx,
        user_code: this.form.user_code,
      })).data
      if(add.code ==200){
        this.userList.push(this.form);
        this.dialogFormVisible = false;
          this.$notify({
          title: "成功",
          message: add.msg,
          type: "success",
        });
      }else{
        this.$notify.error({
          title: "错误",
          message: add.msg,
        });
      }
      
    },
    handleEdit(index, row) {
      
      // 将数据的index传递过来用于实现数据的回显
      this.form = this.userList[index];
      this.currentIndex = index;
      // 设置对话框的可见
      this.dialogFormVisiblea = true;
    },
    async updatea(){
      let editteacher = (await this.$api.home.teacherUpdate({
        name:this.form.name,
        tel:this.form.tel,
        career:this.form.career,
        id:this.form.id,
        zx:this.form.zx,
        user_code:this.form.user_code
       })).data
       if(editteacher.code == 200){
         this.dialogFormVisiblea = false;
          this.$notify({
          title: "成功",
          message: editteacher.msg,
          type: "success",  
          })
       }else{
         this.$notify.error({
          title: "错误",
          message: editteacher.msg,
        });
       }
    },
    handleDelete(index, row) {
      // 设置类似于console类型的功能
      this.$confirm("此操作将会删除老师信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async() => {
          // 移除对应索引位置的数据，可以对row进行设置向后台请求删除数据
          let deletea = (await this.$api.home.teacherDel({
            id:row.id
          })).data
          this.userList.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisiblea = false;
      this.dialogFormVisible = false
    },
    handleSizeChange(val) {
    },
    handleCurrentChange(val) {
    },
    //搜索
    searchClick() {
      let searchText = this.input1;
      let list = [];
      if (searchText) {
        list = this.userList.filter(e => {
          return e.name.match(searchText);
        });
        this.userList = list;
      } else {
        this.thlists();
      }
    },
    //搜索
    searchClicktel() {
      let searchText = this.inputtel;
      let list = [];
      if (searchText) {
        list = this.userList.filter(e => {
          return e.tel.match(searchText);
        });
        this.userList = list;
      } else {
        this.thlists();
      }
    },

    // 导出字段
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      this.arr1 = value.map(item=>item.name).slice(4)
      this.arr2 = value.map(item=>item.id).slice(4) 
      let a = JSON.parse(JSON.stringify(this.arr1))
      let b = JSON.parse(JSON.stringify(this.arr2))
      console.log("a",a);
      console.log("b",b);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 确定导出
    dialogVisibleClick() {
      this.dialogVisibletwo = false;
      this.export2Excel();
    },
    // 导出
    export2Excel() {
      require.ensure([], () => {
        let a = JSON.parse(JSON.stringify(this.arr1))
        let b = JSON.parse(JSON.stringify(this.arr2))
        const { export_json_to_excel } = require("../../excal/Export2Excel");
        const tHeader = a; // 上面设置Excel的表格第一行的标题
        const filterVal = b; // 上面的index、phone_Num、school_Name是tableData里对象的属性
        const list = this.userList; //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "教师列表");
      });
    },
    handleClose(done) {
      done();
    },
    formatJson(filterVal, jsonData) {
      console.log(filterVal);
      console.log(jsonData);
      for(var i=0;i<jsonData.length;i++){
        jsonData[i].status === -1?jsonData[i].status = '已结班': jsonData[i].status = '未结班'
      }
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
  }
};
</script>
<style lang="less" scope>
.tableMain {
    margin-top: 10px;
  }
.page {
    float: left;
    margin-top: 10px;
  }
//搜索框文字
 .spansearch{
   color: #409EFF;
   font-size: 15px;
   margin-left: 20px;
 }
  
.el-input--suffix {
  .el-input-group__append {
    border-color: #1890ff;
    .btnSearch {
      background: #1890ff;
      color: #fff;
      border-radius: 0;
    }
  }
}
</style>